<template>
    <!--商品图片管理弹框-->
    <el-dialog
            title="商品图片管理"
            :visible.sync="dialogVisible"
            width="70%"
            :before-close="handleClose">
        <el-upload
                :key="key"
                :action="uploadUrl"
                :data="uploadData"
                :limit="4"
                list-type="picture-card"
                :before-remove="handleRemove"
                :file-list="fileList"
                :before-upload="beforeAvatarUpload">
            <i class="el-icon-plus"></i>
        </el-upload>
    </el-dialog>
</template>

<script>
    import * as u from '@/util/util'
    import * as c from '@/util/config'

    export default {
        name: "imgDia",
        data() {
            return {
                key: u.uuid(),
                //文件上传url
                uploadUrl: c.api + "/bus-file/add?token=" + u.getToken(),
                //上传额外附带的参数
                uploadData: {},
                //弹框标识
                dialogVisible: false,
                //文件集合
                fileList: [],
            }
        },
        methods: {
            //删除文件回调
            handleRemove(file) {
                this.$HttpService.del("/bus-file/delete-by-id/" + file.response.data.id).catch(err => {
                    return;
                })
            },

            //文件上传前的回调
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt10M = file.size / 1024 / 1024 < 10;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt10M) {
                    this.$message.error('上传头像图片大小不能超过 10MB!');
                }
                return isJPG && isLt10M;
            },

            //打开弹框
            openDia(id) {
                this.uploadData.tableId = id;
                this.uploadData.fileBusiness = this.$dict.FileBusiness.GOODS;
                this.key = u.uuid();
                //获取原有的图片
                this.$HttpService.get("/bus-file/notLogin/findList?tableId=" + id + "&fileBusiness=" + this.$dict.FileBusiness.GOODS).then(res => {
                    this.fileList = res.map(x => {
                        return {
                            name: x.name,
                            url: this.$util.getFileUrl(x.path),
                            response: {
                                data: x
                            }

                        }
                    })
                })
                this.dialogVisible = true;
            },

            //关闭弹框
            handleClose(done) {
                this.key=u.uuid();
                done();
            }
        }
    }
</script>

<style scoped>

</style>
